<template>
  <div class="header-left">
    <router-link :to="backUrl" class="back-button">
      <i class="icon-arrow-left"></i> {{ backText }}
    </router-link>
    <h1 class="page-title">{{ title }}</h1>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

defineProps({
  title: {
    type: String,
    required: true
  },
  backUrl: {
    type: String,
    default: '/'
  },
  backText: {
    type: String,
    default: '返回主页'
  }
});
</script>

<style scoped>
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-left: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #165DFF;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #0E42D2;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, #165DFF, #0E42D2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
</style>